<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>app</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="header container-fluid">
        <div class="row">
            <div class="col-xs-3 header-l"><i class="glyphicon glyphicon-list "></i></div>
            <div class="col-xs-6 header-c"><a href="#"><img src="img/logo.png" alt="" class="img-responsive"></a></div>
            <div class="col-xs-3 header-r"><img src="img/r.png" alt="" class="img-responsive"></div>
        </div>

    </div>
    <div class="content">
        <nav>
            <div id="wrapperIndexActivity" class="wrapperIndexActivity">
                <div class="scrollerActivity" id="scrollerActivity">
                    <ul>
                        <li> <a href="#" class="active">首页</a></li>
                        <li><a href="#">团购</a></li>
                        <li><a href="#">品牌</a></li>
                        <li><a href="#">积分中心</a></li>
                        <li><a href="#">商城店铺</a></li>
                        <li><a href="#">安登超市</a></li>
                        <li><a href="#">商家免费入驻</a></li>
                        <li><a href="#">限时折扣</a></li>
                        <li><a href="#">安徽大市场</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="banner">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
                    <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
                    <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <a href="#">
                            <img src="img/5.png" alt="..." class="img-responsive">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="img/5.png" alt="..." class="img-responsive">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="img/5.png" alt="..." class="img-responsive">
                        </a>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="list-img container-fluid">
            <h3>家用电器 7天无理由退换30天价保</h3>
            <div class="row box-img" >
                <div class="col-xs-6">
                    <a href="#">
                        <img src="img/1.png" alt=""  class="img-responsive">
                    </a>

                </div>
                <div class="col-xs-6 list-img-r">
                    <div class="img-top">
                        <a href="#">
                            <img src="img/2.png" alt=""  class="img-responsive">
                        </a>
                    </div>
                    <div class="img-bot">
                        <a href="#">
                            <img src="img/3.png" alt=""  class="img-responsive">
                        </a>
                    </div>

                </div>


            </div>
            <div class="row">
                <div class="rol-xs-12">
                    <div class="big-img">
                        <a href="#">
                            <img src="img/4.png" alt=""  class="img-responsive">
                        </a>
                    </div>

                </div>
            </div>
            <div class="row appliance">
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                         </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
            </div>
            <h3>生鲜美食</h3>
            <div class="row fresh" >
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
            </div>
            <h3>五金</h3>
            <div class="row hardware">
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>
                <div class="col-xs-6 list-img-l">
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                    <p>
                        <a href="#">
                            【郭伯伯】000000000000002222
                        </a>
                    </p>
                    <hr>
                    <span>￥<strong>62.50</strong></span>
                </div>

            </div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#"><i class="glyphicon glyphicon-th-large"></i>分类</a></li>
            <li><a href="#"><i class="fa fa-user" ></i>个人中心</a></li>
            <li><a href="#"><i class="fa fa fa-university"></i>首页</a></li>
            <li><a href="#"><i class="fa fa-shopping-cart"></i>购物车</a></li>
            <li><a href="#"><i class="fa fa-search-minus"></i>搜索</a></li>
        </ul>
    </div>
    <div class="top">
        <img src="img/top.png" alt="">
    </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
    <script src="js/iscroll.js"></script>
    <script>
        $(function(){
            var homeScroll = new iScroll("wrapperIndexActivity", {
                snap : true,
                vScroll:false,
                hScroll:true,
                momentum : false,
                hScrollbar : false,
                vScrollbar : false,
                checkDOMChanges : true,
                onScrollEnd : function() {

                }
            });
            $('.scrollerActivity li').click(function(){
               $(this).find('a').addClass('active').parent().siblings().find('a').removeClass('active');
            });
            $(".top").click(function(e){
                e.preventDefault();
                $(document.body).animate({scrollTop:0},800);
                $(document.documentElement).animate({scrollTop:0},800);
            });
            $(window).scroll(function(){
                var s=$(window).scrollTop();
                if(s>200){
                    $('.top').show();

                }else{
                    $('.top').hide();
                }
            });
        })

    </script>
</body>
</html>